<template>
    <m-popup-pannel ref="popup" :bottom="bottom" @change="(val:any)=>emits('change',val)">
        <m-lr-layout>
            <template v-slot:left>
                <image class="m-product-image" :src="item?.productInfo.imageUrl" />
            </template>
            <m-lr-layout-item class="m-product-price">{{ item?.productInfo.price }}</m-lr-layout-item>
            <m-lr-layout-item class="m-product-spec-desc">
                {{ specDesc }}
            </m-lr-layout-item>
        </m-lr-layout>
        <scroll-view scroll-y class="m-cart-spec-scroll-view">
            <uni-section v-for="specCategory in item?.productInfo.specCategorys" :title="specCategory.name" type="line">
                <view class="m-section-content">
                    <template v-for="spec in specCategory.specs">
                        <m-tag
                            v-if="isSelSpec(spec)"
                            :inverted="true"
                            color="red"
                            @click="tagClick(spec)"
                            :text="spec.name"
                            padding-size="large"
                            size="middle"
                        ></m-tag>
                        <m-tag
                            v-else
                            :inverted="false"
                            color="#808080"
                            @click="tagClick(spec)"
                            :text="spec.name"
                            padding-size="large"
                            size="middle"
                        ></m-tag>
                    </template>
                </view>
            </uni-section>
            <uni-section title="可选服务" type="line">
                <radio-group @change="serviceChange" class="m-cart-spec-service-panenl">
                    <label v-for="service in item?.services">
                        <view class="m-col-margin-base">
                            <radio :value="`${service.id}`" :checked="isSelService(service)" />
                            <text class="m-row-margin-lg">{{ service.title }}</text>
                        </view>
                    </label>
                </radio-group>
            </uni-section>
        </scroll-view>
    </m-popup-pannel>
</template>

<script lang="ts" setup>
import { ref, watch, shallowRef, computed, shallowReactive, triggerRef } from 'vue'
import MPopupPannel from '@/components/common/MPopupPannel.vue'
import MLrLayout from '@/components/common/MLrLayout.vue'
import MLrLayoutItem from '@/components/common/MLrLayoutItem.vue'
import MTag from '@/components/common/MTag.vue'
let item = shallowRef<CartProductItem>()
const props = withDefaults(
    defineProps<{
        bottom?: string
    }>(),
    {
        bottom: '0rpx'
    }
)
const specDesc = computed(() => {
    return ' 已选 ' + item.value?.specs.map((v) => v.name).join(',')
})

function isSelSpec(spec: Spec): boolean {
    return (item.value?.specs.findIndex((v) => v.id == spec.id) ?? -1) > -1
}

function isSelService(product: Product): boolean {
    return item.value?.userService?.id == product.id
}

function serviceChange(val: any) {
    if (item.value) {
        item.value.userService = item.value.services?.find((v) => v.id == val.detail.value)!
    }
}

function tagClick(spec: Spec) {
    if (item.value) {
        let index = item.value.specs.findIndex((v) => v.id == spec.id)
        if (index < 0) {
            let temp = item.value.specs.findIndex((v) => v.categoryId == spec.categoryId)
            item.value.specs.splice(temp, 1, spec)
        }
    }
}

const popup = ref<InstanceType<typeof MPopupPannel> | null>(null)
defineExpose({
    close: () => popup.value?.close(),
    open: (product: CartProductItem) => {
        item.value = product
        popup.value?.open()
    }
})
const emits = defineEmits(['change'])
</script>

<style lang="scss" scoped>
.m-cart-price-detail {
    font-weight: bold;
}
.m-product-image {
    width: 210rpx;
    height: 210rpx;
    border-radius: $uni-border-radius-lg;
}
.m-section-content {
    padding: 20rpx;
}
.m-section-decoration {
    width: 12rpx;
    height: 28rpx;
    margin-right: 8rpx;
    border-radius: 50%;
    background-color: $uni-color-error;
}
.m-cart-spec-scroll-view {
    height: 65vh;
}
.m-cart-spec-service-panenl {
    border-radius: $uni-border-radius-lg;
    background-color: $uni-bg-color-grey;
    padding: 20rpx;
    margin-left: 20rpx;
}
</style>
